<template>
  <div id="details">
    <van-cell-group>
    <van-field label="任务编号" :value="dataInfo.work_code" readonly />
    <van-field label="任务类型" :value="dataInfo.work_class_name" readonly />
    <van-field label="状态" :value="dataInfo.status_name" readonly />
    <van-field label="发起人" :value="dataInfo.create_by_name" readonly />
    <van-field label="指派给" :value="dataInfo.assigned_to_name" readonly />
    <van-field label="创建时间" :value="dataInfo.create_at" readonly />
    </van-cell-group>
    <van-form @submit="onSubmit">
    <div class="radio_style custom-title-font">
        <span>任务图片</span>
        <van-uploader v-model="fileList" :after-read="afterRead" multiple/>
    </div>
    <div style="margin: 16px;">
      <van-button round block type="info" native-type="submit">提交</van-button>
    </div>
  </van-form>
  </div>
</template>

<script>
import { taskDetails, updateWorkImage } from '@/api/task.js'
import { uploadImage } from '@/api/purchase.js'
import { Toast } from 'vant'
export default {
  data () {
    return {
      value: '',
      dataInfo: {
        create_by_name: '',
        status_name: '',
        work_class_name: '',
        work_code: '',
        assigned_to_name: '',
        create_at: ''
      },
      fileList: [],
      filePrams: []
    }
  },
  created () {
    this.taskDetailsmethods()
  },
  methods: {
    async taskDetailsmethods () {
      const res = await taskDetails(this.$route.query.id)
      if (res.data.code === 1) {
        this.dataInfo.create_by_name = res.data.data.create_by_name
        this.dataInfo.status_name = res.data.data.status_name
        this.dataInfo.work_class_name = res.data.data.work_class_name
        this.dataInfo.work_code = res.data.data.work_code
        this.dataInfo.assigned_to_name = res.data.data.assigned_to_name
        this.dataInfo.create_at = res.data.data.create_at
        res.data.data.file_list.forEach(element => {
          this.fileList.push(element)
        })
        res.data.data.file_list.forEach(element => {
          this.filePrams.push(element)
        })
      }
    },
    async afterRead (file) {
      file.status = 'uploading'
      file.message = '上传中...'
      const res = await uploadImage(file.content)
      if (res.data.code === 1) {
        this.filePrams.push({ url: res.data.data })
        file.status = 'success'
        file.message = '上传成功'
      }
    },
    async onSubmit () {
      const res = await updateWorkImage(this.filePrams, this.$route.query.id)
      if (res.data.code === 1) {
        Toast.success(res.data.info)
      }
    }
  }
}
</script>

<style>
  section {
    padding: 20px;
  }
  .radio_style{
     margin-left:20px;
     margin-top:5px;
  }
  .radio_style_item{
     margin-bottom: 10px;
  }
</style>
